<template>
  <div class="photoDetail">
    <div class="photoDetailHeader">
      <div class="photoName">
        <div class="cover">
          <img :src="PhotoInfo.cover" alt="" />
        </div>
        <div class="info">
          <div class="info-header">
            <span class="name">{{ PhotoInfo.name }}</span>
            <span class="total"
              >{{ PhotoInfo.total }}张 /
              {{ PhotoInfo.isPrivate === 1 ? "公开" : "仅自己可见" }}</span
            >
          </div>
          <div class="info-tools">
            <a-button type="primary" @click="opening = true">上传照片</a-button>
            <a-button
              :class="isMany ? 'btnActive' : ''"
              @click="changeManyManage"
              >{{ isMany ? "取消批量管理" : "批量管理" }}
            </a-button>
            <template v-if="isMany">
              <a-button @click="checkAll">{{
                ischeckAll ? "取消全选" : "全选"
              }}</a-button>
              <a-popconfirm
                cancel-text="取消"
                ok-text="删除"
                title="是否删除?"
                @confirm="delCheck"
              >
                <a-button danger>删除</a-button>
              </a-popconfirm>
              <a-button>置顶</a-button>
            </template>
          </div>
        </div>
      </div>
      <div class="more">
        <div class="view moreVertical">
          <span>浏览量</span>
          <span>0</span>
        </div>
        /
        <div class="like moreVertical">
          <span>点赞</span>
          <span>0</span>
        </div>
      </div>
    </div>

    <a-checkbox-group
      v-model:value="checkboxes"
      class="photoDetailList"
      style="width: 100%"
    >
      <div v-for="(item, index) in PhotoList" class="listItem" :key="index">
        <div class="cover">
          <a-checkbox
            v-if="isMany"
            :value="item.id"
            class="checkBox"
          ></a-checkbox>
          <a-image :src="item.image" style="height: 150px; width: 100%" />
        </div>
        <div class="time">
          {{ dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss") }}
        </div>
      </div>
    </a-checkbox-group>
  </div>

  <a-modal title="上传照片" :open="opening" :footer="null" @cancel="restform">
    <a-form
      ref="formRef"
      :label-col="labelCol"
      :model="formState"
      :wrapper-col="wrapperCol"
      layout="horizontal"
      style="max-width: 600px"
    >
      <a-form-item label="上传照片">
        <Upload v-model:FileList="formState.image" :MaxCount="8"></Upload>
      </a-form-item>
      <a-form-item label="描述" name="summary">
        <a-textarea v-model:value="formState.summary" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 14 }">
        <a-button @click.prevent="opening = false">取消</a-button>
        <a-button style="margin-left: 10px" type="primary" @click="onSubmit"
          >提交</a-button
        >
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { useRoute } from "vue-router";
import { deletePhotos, photoDeatil, savePhotos } from "@/api/photo.js";
import { reactive, ref, toRaw } from "vue";
import { message } from "ant-design-vue";
import dayjs from "dayjs";
import Upload from "@/components/Upload/index.vue";
import { userStore } from "@/store/modules/user.js";
const route = useRoute();
const user = userStore();
const PhotoInfo = ref("");
const formRef = ref("");
const PhotoList = ref([]);
const plainOptions = ref([]);
let checkboxes = ref([]);
let isMany = ref(false);
let ischeckAll = ref(false);
let opening = ref(false);
const labelCol = {
  style: {
    width: "140px",
  },
};
const wrapperCol = {
  span: 14,
};
const formState = reactive({
  summary: undefined,
  image: [],
});

const { id } = route.params;
const init = async () => {
  let { info, data, status } = await photoDeatil({ id });
  if (status === 200) {
    PhotoInfo.value = info;
    PhotoList.value = data;
    plainOptions.value = data.map((item) => item.id);
  } else message.error(data);
};
// 提交
const onSubmit = async () => {
  let info = toRaw(formState);
  let res = await savePhotos({ sortId: id, userId: user.user_id, ...info });
  if (res.status === 200) {
    await init();
    restform();
    message.success(res.data);
  } else {
    message.error(res.data);
  }
};

// 点击进行批量管理
const changeManyManage = () => {
  isMany.value = !isMany.value;
};

// 删除相册合集图片
const delCheck = async () => {
  let res = await deletePhotos({ SortId: id, PhotoIds: checkboxes.value });
  await init();
  if (res.status === 200) message.success(res.data);
  else message.error(res.data);
};
//全选
const checkAll = () => {
  ischeckAll.value = !ischeckAll.value;
  if (ischeckAll.value)
    checkboxes.value = [...plainOptions.value, ...checkboxes.value];
  else checkboxes.value = [];
};

const restform = () => {
  formRef.value.resetFields();
  opening.value = false;
};

init();
</script>
<style lang="scss" scoped>
.photoDetail {
  padding: 10px;

  .photoDetailHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 15px;
    border-radius: 10px;

    .photoName {
      display: flex;
      gap: 15px;

      .cover {
        width: 160px;
        height: 90px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: space-evenly;

        .info-header {
          .name {
            font-size: 30px;
            font-weight: bold;
            color: #303133;
          }

          .total {
            font-size: 14px;
            color: #909399;
            margin: 0 20px;
          }
        }

        .info-tools {
          display: flex;
          align-items: center;
          gap: 15px;
        }
      }
    }

    .more {
      display: flex;
      gap: 15px;
      color: #a8abb2;

      .moreVertical {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
      }
    }
  }

  .photoDetailList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 15px;
    margin-top: 15px;

    .listItem {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;

      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      border-radius: 0 0 10px 10px;

      .cover {
        width: 100%;
        height: 140px;
        border-radius: 10px 10px 0 0 !important;
        overflow: hidden;
        position: relative;

        .checkBox {
          position: absolute;
          top: 0;
          right: 5px;
          z-index: 99999;
        }
      }

      .time {
        padding: 15px 10px;
      }
    }
  }
}

.btnActive {
  background-color: #63a35c;
  color: #fff;
}

:deep(.ant-image) {
  width: 100%;
}
</style>
